<template>
  <el-card class="box-card">
    <el-row style="display: flex;justify-content: flex-start;">
      <!--搜索框-->
      <span style="">
        <el-input v-model="userName" style="width: 200px" placeholder="请输入员工名"
                  size="mini"></el-input>
        <el-button type="warning" @click="selectTable" icon="el-icon-search"
                   size="mini">搜索</el-button>
        <el-button type="success" icon="el-icon-edit" @click="addTable"
                   size="mini">添加</el-button>
      </span>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableData" border stripe>
      <el-table-column type="index" width="50"/>
      <el-table-column prop="userName" label="员工名"/>
      <el-table-column prop="deptName" label="部门"/>
      <el-table-column prop="isFever" label="是否发烧">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isFever==1" type="danger" size="medium">是</el-tag>
          <el-tag v-if="scope.row.isFever==2" size="medium">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isRiskArea" label="是否去过风险区域">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isRiskArea==1" type="danger" size="medium">是</el-tag>
          <el-tag v-if="scope.row.isRiskArea==2" size="medium">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="symptom" label="症状"/>
      <el-table-column prop="divide" label="是否被隔离">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.divide==1" type="danger" size="medium">是</el-tag>
          <el-tag v-if="scope.row.divide==2" size="medium">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateById(scope.row.id)">
            修改
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeById(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[3, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="员工姓名">
          <el-select v-model="form.userId" placeholder="请选择" @change="changeSelect">
            <el-option
              v-for="item in redata"
              :key="item.id"
              :label="item.employeeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-input v-model="form.deptName" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否发热">
          <el-radio-group v-model="form.isFever">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isFever==1" label="症状">
          <el-input type="textarea" v-model="form.symptom"></el-input>
        </el-form-item>
        <el-form-item label="是否去过高风险地区">
          <el-radio-group v-model="form.isRiskArea">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否被隔离">
          <el-radio-group v-model="form.divide">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>

export default {
  data() {
    return {
      form: {
        userId: "",
        isFever: "",
        isRiskArea: "",
        symptom: "",
        divide: "",
        deptName: ""
      },
      redata: [],
      dialogTitle: '',//模态框标题
      dialogVisible: false,
      isFever: '',
      userName: '',
      total: 0, // 总条数
      limit: 3,     // 每页显示的条数
      page: 1,  // 当前页码
      tableData: [],
    }
  },
  created() {
    this.fetchData()
    this.getAllEmployee()
  },
  methods: {
    updateById(id){
      this.dialogVisible = true
      this.dialogTitle = "修改疫情防控信息"
      this.$axios({
        method: 'get',
        headers: {
          'Content-Type': 'application/json'
        },
        url: `http://127.0.0.1:8080/security/getById/${id}`,
      }).then((response) => {
        if (response.data.msg != "SUCCESS") {
          this.$message.error(response.data.msg)
        }
        this.form=response.data.data
      }).catch((error) => {
        console.log(error)
      })
    },
    onSubmit() {
      //首先判断是新增还是修改
      if(!this.form.id){
        this.addSecurity()
      }else {
        this.updateSecurity()
      }
      this.dialogVisible = false
      this.fetchData()
    },
    addSecurity(){
      this.$axios({
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        url: `http://127.0.0.1:8080/security/addSecurity`,
        data: this.form
      }).then((response) => {
        if (response.data.msg != "SUCCESS") {
          this.$message.error(response.data.msg)
        }
        this.$message.success("添加成功")
      }).catch((error) => {
        console.log(error)
      })
    },
    updateSecurity(){
      this.$axios({
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        url: `http://127.0.0.1:8080/security/updateSecurity`,
        data: this.form
      }).then((response) => {
        if (response.data.msg != "SUCCESS") {
          this.$message.error(response.data.msg)
        }
        this.$message.success("修改成功")
      }).catch((error) => {
        console.log(error)
      })
    },
    changeSelect(id) {
      this.redata.map(data => {
        if (data.id == id) {
          this.form.deptName = data.deptName
        }
      })
    },
    getAllEmployee() {
      this.$axios({
        method: 'get',
        headers: {
          'Content-Type': 'application/json'
        },
        url: 'http://127.0.0.1:8080/employee/getAll',
      }).then((response) => {
        if (response.data.msg != "SUCCESS") {
          this.$message.error(response.data.msg)
        }
        this.redata = response.data.data
      }).catch((error) => {
        console.log(error)
      })
    },
    //添加操作，打开模态框
    addTable() {
      this.form={}
      this.dialogVisible = true
      this.dialogTitle = "新增疫情防控信息"
    },
    selectTable() {
      this.fetchData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.fetchData()
    },
    fetchData() {
      this.$axios({
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        url: 'http://127.0.0.1:8080/security/listAllSecurity',
        data: {
          limit: this.limit,
          page: this.page,
          isFever: this.isFever,
          userName: this.userName
        }
      }).then((response) => {
        if (response.data.msg != "SUCCESS") {
          this.$message.error(response.data.msg)
        }
        this.tableData = response.data.data.records
        this.total = response.data.data.total //totalcount
        this.current = response.data.data.current //页数
      }).catch((error) => {
        console.log(error)
      })
    },
    removeById(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          return this.deleteById(id)
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.fetchData()
        })
        .catch((err) => {
          console.log(err)
          if (err === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          }
        })
    },
    deleteById(id){
      this.$axios({
        method: 'delete',
        headers: {
          'Content-Type': 'application/json'
        },
        url: `http://127.0.0.1:8080/security/deleteSecurity/${id}`
      })
    }
  },
}
</script>

<style></style>
